<template>
  <div class="msg">
   <header-bar :text="title" :left="left"></header-bar>
  <div class="msgList"
  v-if="list.length > 0"
  v-infinite-scroll="loadMore"
  :infinite-scroll-distance="pageSize">
      <div v-for="(item, key) in list" :key="key">
        <mt-cell-swipe
          :label="item.createTime"
          :title="item.content"
          :right="[
            {
              content: '删除',
              style: { background: 'red', color: '#fff',width:'50px',textAlign:'center',display: 'flex',alignItems: 'center',justifyContent: 'center'},
              handler: () => delmsg(item.id)
            }]">
            </mt-cell-swipe>
      </div>
  </div>
  <div class="noData" v-else>暂无数据</div> 
</div>
</template>
<script>
import headerBar from "./main/header";
import moment from "moment";
import {
  Header,
  CellSwipe,
  InfiniteScroll,
  Toast,
  Indicator,
  MessageBox
} from "mint-ui";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import { messageList, messagedel } from "../api/api.js";
export default {
  name: "Msg",
  data() {
    return {
      msg: "",
      pageNum: 1,
      pageSize: 10,
      list: [
      //   {
      //   createTime:"2018.1",
      //   content:"1231"
      // }
      ],
      flag: false,
      title: "消息",
      left: {
        status: true
      }
    };
  },
  computed: {
    ...mapState(["pageInfo"])
  },
  components: {
    headerBar
  },
  methods: {
    getmsg(p) {
      // Indicator.open('加载中...');
      let para = {
        id: this.pageInfo.userinfo.id,
        pageNum: p,
        pageSize: this.pageSize
      };
      this.$ajaxGet("msglist", para).then(res => {
          // Indicator.close();
          if (res.code !== 200) {
            Toast({
              message: res.msg,
              position: "bottom",
              duration: 5000
            });
          } else {
            for (var i = 0; i < res.data.length; i++) {
              res.data[i].createTime = moment(
                new Date(res.data[i].createTime)
              ).format("MM-DD HH:mm");
            }
            if (this.list == "") {
              this.list = res.data;
            } else {
              this.list = this.list.concat(res.data);
            }
          }
      });
    },
    loadMore() {
      // Indicator.open("加载中...");
      this.pageNum = this.pageNum + 1;
      this.getmsg(this.pageNum);
    },
    
    
    delmsg(id) {
      MessageBox.confirm("确定删除?").then(action => {
        let para = {
          id: id,
        };
        this.$ajaxPost("delmsg", para).then(res => {
          Toast({
              message: res.msg,
              position: "bottom",
              duration: 5000
            });
            if (res.code == 200) {
              this.list = [];
              this.pageNum=1;
              this.getmsg(1);
            }
        });
      });
    }
  },
  mounted() {
    this.getmsg(1);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("../../static/css/msg.css");
.mint-cell{
  min-height: 79px;
}
.msgList .mint-cell .mint-cell-wrapper .mint-cell-title .mint-cell-text{
  display: inline-block;
  margin-bottom: 14px;
}
</style>
